<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }" style="margin-top:20px">
    <div slot="header" class="header">
      <el-tabs class="demo-tabs" v-model="activeName">
        <el-tab-pane label="销售额" name="first"></el-tab-pane>
        <el-tab-pane label="访问量" name="second"></el-tab-pane>
      </el-tabs>
      <div class="right">
        <span @click="today">今日</span>
        <span @click="week">本周</span>
        <span @click="month">本月</span>
        <span @click="year">今年</span>
        <el-date-picker  v-model="timeArr" value-format="YYYY-MM-DD" size="small" type="daterange" range-separator="-"
          start-placeholder="开始" end-placeholder="结束" />
      </div>
    </div>
    <!-- card body -->
    <el-row :gutter="20">
      <el-col :span="18" :offset="0">
        <v-chart :option="getOption()" style="height: 400px" autoresize></v-chart>
      </el-col>
      <el-col :span="6" :offset="0">
        <h4>门店{{ activeName == "first" ? "销售额" : "访问量" }}排名</h4>
        <ul v-show="activeName == 'first'">
          <li v-for="(item, index) in arr" :key="index">
            <span :class="{ active: index < 3 }">{{ item.no }}</span>
            <span>{{ item.name }}</span>
            <span>{{ item.count }}</span>
          </li>
        </ul>
        <ul v-show="activeName != 'first'">
          <li v-for="(item, index) in arr1" :key="index">
            <span :class="{ active: index < 3 }">{{ item.no }}</span>
            <span>{{ item.name }}</span>
            <span>{{ item.count }}</span>
          </li>
        </ul>
      </el-col>
    </el-row>
  </el-card>

</template>

<script setup lang="ts">
import { ref } from 'vue'
import dayjs from 'dayjs'
let activeName = ref('first')
let timeArr = ref([])
const today = () => {
  let start = dayjs().format('YYYY-MM-DD')
  let end = dayjs().format('YYYY-MM-DD')
  timeArr.value = [start, end]
}
const week=()=>{
  let start=dayjs().day(1).format('YYYY-MM-DD')
  let end=dayjs().day(7).format('YYYY-MM-DD')
  timeArr.value=[start,end]
}
const month=()=>{
  let start=dayjs().startOf('month').format('YYYY-MM-DD')
  let end=dayjs().endOf('month').format('YYYY-MM-DD')
  timeArr.value=[start,end]
}
const year=()=>{
  let start=dayjs().startOf('year').format('YYYY-MM-DD')
  let end=dayjs().endOf('year').format('YYYY-MM-DD')
  timeArr.value=[start,end]
}
const getOption = () => {
  return {
    xAxis: [{
      type: "category",
      data: props.x,
      axisTick: {
        alignWithLabel: true,
      },
    }],
    yAxis: [{
      //y轴线展示
      // axisLine: {
      //     show: true,
      //   },
      //y轴的刻度

      // axisTick: {
      //   show: true,
      // },
    }],
    series: [{
      name: "Direct",
      type: 'bar',
      colorBy: "data",
      barWidth: "60%",
      data: activeName.value == "first" ? props.saleArr : props.visiteArr
    }],
    title: {
      text: activeName.value == 'first' ? '销售额' : '访问量'
    },
    // 提示组件
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "0",
      right: "0",
      bottom: "0",
      containLabel: true,
    },
    //展示数值
    label: {
      show: true,
      //文本位置
      position: "top",
      //旋转
      rotate: 20,
      color: "hotpink",
    },
  }
}
//接受父组件传递过来销售额与访问量数据
let props = defineProps(["saleArr", "visiteArr", "x", "arr", "arr1"]);
</script>

<style scoped>
.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.header {
  position: relative;
}

.right {
  position: absolute;
  right: 0;
  top: 10px
}

.right span {
  margin: 0px 5px;
}
ul{
  list-style: none;
}
li {
  font-size: 12px;
  margin-top: 20px;
  display: flex;
  /**水平轴对齐方式**/
  justify-content: space-between;
}
li span:nth-child(1) {
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
}
li span.active {
  border-radius: 50%;
  background: black;
  color: white;
}
</style>